<script setup lang="ts">
import { NAvatar, NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui'
import { ref } from 'vue'
import { useAuthStore } from '../store/auth'
import { onMounted } from 'vue';
import { useRouter } from "vue-router"
const authStore = useAuthStore()
const userInfo = ref(authStore.user)
const isEditing = ref(false)
const router = useRouter();
const handleLogout = () => {
// 清除用户认证信息
localStorage.removeItem('token');
// 重置 auth store 状态
authStore.$reset();
    router.push('/login');
};
onMounted(async () => {
    await authStore.fetchUserProfile();
    userInfo.value = { ...authStore.user };
});
</script>

<template>
    <div class="max-w-4xl mx-auto px-4 pb-12">
        <main class="max-w-4xl mx-auto px-4 pt-16 pb-12">
            <n-card title="个人信息" class="rounded-[1rem] shadow-2xl">
                <div class="flex flex-col items-center mb-8">
                    <n-avatar round :size="120"
                        :src="userInfo?.avatar || 'https://randomuser.me/api/portraits/lego/1.jpg'" class="mb-4" />
                    <!-- <n-button type="primary" @click="isEditing = !isEditing" color="#fb923c" class="!text-white">
            {{ isEditing ? '取消编辑' : '编辑资料' }}
          </n-button> -->
                </div>

                <n-form :disabled="!isEditing">
                    <n-form-item label="姓名">
                        <n-input v-model:value="userInfo.username" placeholder="请输入姓名" />
                    </n-form-item>
                    <n-form-item label="电子邮箱">
                        <n-input v-model:value="userInfo.email" placeholder="请输入邮箱" />
                    </n-form-item>

                    <div  class="flex justify-center gap-4 mt-8">
                        <n-button type="primary" @click="handleLogout" color="#fb923c" class="!text-white mt-4">
                            退出登录
                        </n-button>
                    </div>
                    
                </n-form>
            </n-card>
        </main>
    </div>
</template>